<template>
    <view>
        <!-- 自定义导航栏 -->
        <!-- 这个是大组件 -->
        <view class="headdiv">
            <!-- 图标区 -->
            <view class="logoimagediv">
                <view class="icondiv">
                    <image src="/static/logo.png" mode="scaleToFill" style="width: 80px; height: 80px" />
                </view>
                <view class="testdiv">E-Go</view>
            </view>
            <!-- 主体区 -->
            <view class="bodydiv">
                <!-- 切换区域 -->
                <view class="tabssdiv">
                    <u-tabs :list="list1" @click="myclick"></u-tabs>
                </view>
                <!-- 输入框区域 -->
                <view class="inputdiv" v-show="active === 0">
                    <u--form labelPosition="left">
                        <u-form-item borderBottom>
                            <view class="mapdiv">
                                <mypicker
                                    class="mypickerdiv"
                                    :candidates="peopleList"
                                    :isJSON="true"
                                    keyName="name"
                                    :placeholder="internationalization.register.ThAreaCode"
                                    v-model="regiPerson"
                                    @select="personSelect"
                                ></mypicker>
                            </view>
                            <u--input :placeholder="internationalization.login.phoneplaceholder" type="number" v-model="phoneobj.mobile"></u--input>
                        </u-form-item>
                        <u-form-item borderBottom>
                            <br />
                            <u--input :placeholder="internationalization.login.pawplaceholder" :prefixIcon="passwordicon" v-model="phoneobj.password" password></u--input>
                        </u-form-item>
                    </u--form>
                </view>
                <view class="inputdiv" v-show="active === 1">
                    <u--form labelPosition="left">
                        <u-form-item borderBottom>
                            <u--input :prefixIcon="mailboxicon" v-model="phoneobj.mobile" :placeholder="internationalization.login.emailplaceholder"></u--input>
                        </u-form-item>
                        <u-form-item borderBottom>
                            <u--input :prefixIcon="passwordicon" :placeholder="internationalization.login.pawplaceholder" v-model="phoneobj.password" password></u--input>
                        </u-form-item>
                        <br />
                        <van-radio-group style="display: flex; justify-content: center"></van-radio-group>
                    </u--form>
                    <br />
                    <!-- <van-radio-group style="display: flex; justify-content: center"
						@change="emailobj.radio = $event.detail" v-model="emailobj.radio" direction="horizontal">

					</van-radio-group> -->
                </view>
                <!-- 登录按钮区域 -->
                <view class="buttondiv">
                    <van-button type="primary" round size="large" @click="Mygologin">{{ internationalization.login.btn }}</van-button>
                </view>
                <!-- 注册，忘记密码区域 -->
                <view class="enddiv">
                    <view @click="MygoRigister">{{ internationalization.login.nowe }}</view>
                    <view>{{ internationalization.login.forgotpaww }}</view>
                </view>
                <!-- 其他登录方式区域 -->
<!--                <view class="otherdiv">-->
<!--                    &lt;!&ndash; 其他登录标题区域 &ndash;&gt;-->
<!--                    <view class="twotitlediv">-->
<!--                        <image src="@/static/icon/left.png" style="width: 120px; height: 1px" mode="scaleToFill" />-->
<!--                        <text style="font-size: 12px; color: rgba(153, 153, 153, 1)">{{ internationalization.login.describe }}</text>-->
<!--                        <image src="@/static/icon/right.png" style="width: 120px; height: 1px" mode="scaleToFill" />-->
<!--                    </view>-->
<!--                    &lt;!&ndash; 登录方式 &ndash;&gt;-->
<!--                    <view class="twowaydiv">-->
<!--                        <view class="one">-->
<!--                            <image src="@/static/icon/iconify-logos_facebook.png" style="width: 30px; height: 30px" mode="scaleToFill" />-->
<!--                        </view>-->
<!--                        <view class="one">-->
<!--                            <image src="@/static/icon/iconify-flat-color-icons_google.png" style="width: 30px; height: 30px" mode="scaleToFill" />-->
<!--                        </view>-->
<!--                    </view>-->
<!--                </view>-->
            </view>
        </view>
    </view>
</template>

<script>
import * as UserApi from '@/api/member/user'
import * as AuthApi from '@/api/member/auth'
import { sendCode, verifyCode } from '../../http/sms/sms'
import Mypicker from '../../wxcomponents/title/Mypicker.vue'
import * as wssocket from '@/common/wssocket.js'
// import {
// 	getInfo
// } from "../../http/user/user"
export default {
    components: {
        mypicker: Mypicker
    },
    data() {
        return {
            //   手机号注册的对象
            phoneobj: {
                // 手机号
                mobile: '',
                // 验证码
                code: null,
                // 密码
                password: '',
                // 这个是
                radio: '1'
            },
            areaCode: 66,
            verificationCodeSent: false,
            countdown: 0,
            active: 0,
            regiPerson: '', // 选择的Item
            peopleList: [
                {
                    index: 0,
                    name: 'จีน+86'
                },
                {
                    index: 1,
                    name: 'ไทย+66'
                }
            ], // 登记人选择列表,
            //   密码icon
            passwordicon: require('@/static/icon/password.png'),
            //   邮箱icon
            mailboxicon: require('@/static/icon/iconify-material-symbols-light_mail@2x.png'),
            // 这个是国际化的数据
            internationalization: {},
            value: '',
            type: 'text',
            border: true,
            isTransparent: true, // 是否透明
            // 切换的语言
            language: 'China', //China   English
            usericon: require('@/static/icon/1.png'),
            // passwordicon: require('@/static/icon/password.png'),
            // 账号
            username: '',
            // 密码
            password: '',
            // 这个是切换list
            list1: [],
            // 这个是切换list
            list2: [
                {
                    name: 'Login'
                }
            ]
        }
    },
    onShow: function () {
        this.getlanguagedata()
    },
    onScroll(e) {
        // 监听页面滚动事件
        if (e.detail.scrollTop > 10) {
            // 当页面滚动超过一定距离时，导航栏不透明
            this.isTransparent = false
        } else {
            // 页面滚动未超过一定距离时，导航栏透明
            this.isTransparent = true
        }
    },
    onLoad() {
        this.getlanguagedata()
        let tokend = uni.getStorageSync('token')
        if (tokend) {
            uni.switchTab({
                url: '/pages/Home/Home'
            })
        } else {
            // 断开链接
            wssocket.close()
            this.$store.commit("setIsConnect", false)
        }
    },
    mounted() {
        this.getlanguagedata()
        let tokend = uni.getStorageSync('token')
        if (tokend) {
            uni.switchTab({
                url: '/pages/Home/Home'
            })
        }
        // #ifdef  MP-WEIXIN
        this.nav()
        // #endif
    },
    methods: {
        // 登记人员选择
        personSelect(e) {
            if (e.index == 0) {
                this.areaCode = 86
            } else {
                this.areaCode = 66
            }
            // console.log("登记人员选择", e.index);
        },
        // 这个是切换的
        myclick(index) {
            this.active = index.index
            this.phoneobj.password = ''
            this.phoneobj.mobile = ''
        },
        sendVerificationCode() {
            if (this.verificationCodeSent) return
            this.verificationCodeSent = true
            this.countdown = 60
            const countdownInterval = setInterval(() => {
                this.countdown -= 1
                if (this.countdown <= 0) {
                    clearInterval(countdownInterval)
                    this.verificationCodeSent = false
                }
            }, 1000)
            // 调用发送验证码API
            let params = {
                mobile: this.phoneobj.phone,
                scene: 1,
                countryCode:this.areaCode
            }
            if (this.areaCode === 66) {
                params.mobile = this.areaCode + this.phoneobj.phone
                params.scene = 22
            }
            sendCode(params)
                .then((response) => {
                    // 处理响应
                    console.log('验证码发送成功', response)
                })
                .catch((error) => {
                    console.error('验证码发送失败', error)
                })
        },
        getlanguagedata() {
            this.internationalization = this.$store.getters['internationalization/getinternationalization']
            this.list1 = this.internationalization.login.title
            this.peopleList[0].name = this.internationalization.register.ChAreaCode
            this.peopleList[1].name = this.internationalization.register.ThAreaCode
        },
        onClickDisabled(name, title) {
            Toast(name + '已被禁用')
        },
        // 登录
        async Mygologin() {
            // // 手机号正则表达式
            let chinaPhoneReg = /^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/
            let thailandPhoneReg = /^[689]\d{8}$/
            // 邮箱正则表达式
            let email_reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
            if (this.active === 0) {
                if (this.areaCode === 86 && !chinaPhoneReg.test(this.phoneobj.mobile)) {
                    uni.showToast({
                        title: '手机格式有误！',
                        //将值设置为 success 或者直接不用写icon这个参数
                        icon: 'error',
                        //显示持续时间为 2秒
                        duration: 2000
                    })
                    return
                }

                if (this.areaCode === 66 && !thailandPhoneReg.test(this.phoneobj.mobile)) {
                    uni.showToast({
                        title: '手机格式有误！',
                        //将值设置为 success 或者直接不用写icon这个参数
                        icon: 'error',
                        //显示持续时间为 2秒
                        duration: 2000
                    })
                    return
                }
            }

            if (this.active === 1 && !email_reg.test(this.phoneobj.mobile)) {
                uni.showToast({
                    title: '邮箱格式有误！',
                    //将值设置为 success 或者直接不用写icon这个参数
                    icon: 'error',
                    //显示持续时间为 2秒
                    duration: 2000
                })
                return
            }
            // this.$store.commit('store/setDepid', this.username)
            AuthApi.login({
                mobile: this.phoneobj.mobile,
                password: this.phoneobj.password,
                countryCode:this.areaCode
            })
                .then(({ data }) => {
                    // TODO 芋艿：refreshToken 机制
                    uni.showToast({
                        title: "登录中...",
                        //将值设置为 success 或者直接不用写icon这个参数
                        // icon: 'success',
                        //显示持续时间为 2秒
                        duration: 2000
                    })
                    // uni.showLoading({
                    //     title: '登录中...'
                    //
                    // })
                    //跳转前把用户信息存入vuex getInfo
                    // uni.setStorageSync("USER_INFO", data);
                    uni.setStorageSync('UID', data.userId)
                    uni.setStorageSync('token', data.accessToken)
                    uni.setStorageSync('LOGIN_STATUS', data.accessToken)
                    uni.setStorageSync('loginInfo', data)
                    UserApi.getUserInfo().then((res) => {
                        // 注意这里改为箭头函数
                        // 现在这里的this指向外层的Vue实例
                        // uni.setStorageSync("USER_INFO", res.data);
                        uni.setStorageSync('SET_USER_INFO', res.data)
                        uni.setStorageSync('USER_INFO', res.data)
                        // uni.setStorageSync('userName', res.data.nickname)
                    })
                    this.initSocket(data.accessToken)
                    uni.switchTab({
                        url: '/pages/Home/Home'
                    })
                })
                .catch((e) => {
					console.log(JSON.stringify({
                mobile: this.phoneobj.mobile,
                password: this.phoneobj.password,
                countryCode:this.areaCode
            }))
					console.log(e,'catch')
                    uni.showToast({
                        title: `${data.msg}`,
                        //将值设置为 success 或者直接不用写icon这个参数
                        icon: 'error',
                        //显示持续时间为 2秒
                        duration: 2000
                    })
                })
            // 	await this.$api.user
            // 		.getlogin({
            // 			mobile: this.phoneobj.mobile,
            // 			password: this.phoneobj.password,
            // 		})
            // 		.then((res) => {
            // 			if (res.code == 0) {
            // 				uni.showLoading({
            // 					title: "登录中...",
            // 				});
            // 				//跳转前把用户信息存入vuex getInfo
            // 				uni.setStorageSync("token", res.data.accessToken);
            // 				getInfo().then((res) => { // 注意这里改为箭头函数
            // 					console.log("getInfo 执行了")
            // 					// 现在这里的this指向外层的Vue实例
            // 					this.$store.commit('user/SET_USER_INFO', res.data);

            // 				});
            // 				uni.switchTab({
            // 					url: "/pages/Home/Home"
            // 				});

            // 			} else {
            // 				uni.showToast({
            // 					title: res.msg,
            // 					//将值设置为 success 或者直接不用写icon这个参数
            // 					icon: "error",
            // 					//显示持续时间为 2秒
            // 					duration: 2000,
            // 				});
            // 			}
            // 		});
        },
        // 去登录
        MygoRigister() {
            uni.navigateTo({
                url: '/pages/Register/Register'
            })
        },
        initSocket(token) {
            if (token && !this.isConnect) {
                wssocket.onMessage((data) => {
                    this.$store.commit("setSocketMessage", data)
                })
                wssocket.onInit(() => {
                    this.$store.commit("setIsConnect", true)
                })
                wssocket.onClose(() => {
                    wssocket.reconnect(`ws://decimalism.natapp1.cc/ws?token=${token}`, token)
                })
                wssocket.connect(`ws://decimalism.natapp1.cc/ws?token=${token}`, token)
                wssocket.init()
            } else {
                if (!this.$store.state.wssocket.isConnect) {
                    wssocket.close()
                    this.$store.commit("setIsConnect", false)
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
/* 根据 isTransparent 来设置导航栏样式 */
.custom-navbar {
    background-color: rgba(255, 255, 255, 0.8);
    /* 默认半透明背景 */
}

.custom-navbar.transparent {
    background-color: transparent;
    /* 透明背景 */
}

.headdiv {
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100vh;
    opacity: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(94.07deg, rgba(235, 255, 236, 1) 0%, rgba(220, 247, 242, 1) 100%);

    .logoimagediv {
        width: 100%;
        height: 40%;
        margin-top: 30px;

        .icondiv {
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .testdiv {
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            /** 文本1 */
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 0px;
            line-height: 17.72px;
            color: #07c160;
            text-align: left;
            vertical-align: top;
        }
    }

    // 主体区域
    .bodydiv {
        width: 100%;
        height: 60%;
        background-color: #ffffff;
        opacity: 1;
        border-radius: 10% 10% 0rpx 0rpx;
        overflow: hidden;

        .tabssdiv {
            width: 60%;
            height: 13%;
            margin-left: 20px;
            overflow: hidden;
        }

        // 输入框区域
        .inputdiv {
            width: 100%;
            height: 30%;
            margin-bottom: 30px;
        }

        // 登录按钮区域
        .buttondiv {
            width: 100%;
            height: 15%;
            margin-top: 15px;
            display: flex;
            justify-content: center;
        }

        // 注册，忘记密码区域样式
        .enddiv {
            width: 50%;
            height: 10%;
            margin: auto;
            padding-bottom: 10px;
            font-family: 'Times New Roman', '华文中宋', sans-serif;
            font-size: 12px;
            color: rgba(153, 153, 153, 1);
            display: flex;
            justify-content: space-around;
        }

        // 其他登录方式区域样式
        .otherdiv {
            width: 100%;
            height: 32%;

            // 标题区域
            .twotitlediv {
                width: 100%;
                height: 20%;
                margin: auto;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }

            .twowaydiv {
                width: 100%;
                height: 20%;
                display: flex;
                justify-content: center;

                .one {
                    width: 45px;
                    height: 100%;
                    margin-top: 10px;
                    margin-left: 20px;
                }
            }
        }
    }
}

.mapdiv {
    // position: absolute;
    // top: 0;
    // left: 0;
    width: 100px;
    text-align: center;
    // height: 13%;
    /* 设置 mapdiv 的高度 */
    z-index: 1;
    /* 将 mapdiv 放置在上层 */
    display: flex;

    // 这个是子组件下拉框样式
    .mypickerdiv {
        width: 100%;
        // height: 100%;
        font-size: 12px;
        text-align: left;
        font-weight: 400px;
        display: flex;
    }
}

/deep/ .van-tab__text {
    font-size: 16px !important;
    font-weight: bold !important;
}

/deep/ .van-tabs__line {
    position: absolute;
    bottom: 10px;
    left: 0;
    z-index: 1;
    width: 40px;
    height: 5px;
    border-radius: 3px;

    background: linear-gradient(90deg, rgba(65, 240, 135, 1) 0%, rgba(47, 212, 184, 1) 100%);
}

/deep/ .van-button--primary {
    width: 360px;
    color: #fff;
    background: linear-gradient(90deg, rgba(65, 240, 135, 1) 0%, rgba(47, 212, 184, 1) 100%);
    border: 1px solid #07c160;
    font-size: 16px;
    font-weight: 700;
}

/deep/ uni-page-head .uni-page-head {
    position: fixed;
    left: var(--window-left);
    right: var(--window-right);
    height: 44px;
    height: calc(44px + constant(safe-area-inset-top));
    height: calc(44px + env(safe-area-inset-top));
    padding: 7px 3px;
    padding-top: calc(7px + constant(safe-area-inset-top));
    padding-top: calc(7px + env(safe-area-inset-top));
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    box-sizing: border-box;
    z-index: 998;
    color: #fff;
    background-color: #b03535 !important;
    -webkit-transition-property: all;
    transition-property: all;
}

/deep/ .u-input--radius[data-v-113bc24f],
.u-input--square[data-v-113bc24f] {
    border-radius: 1px;
    width: 100% !important;
}

/deep/ .u-border {
    border: none;
    /* 移除默认边框 */
    // border-bottom: 2px solid rgba(217, 219, 218, 1); /* 下边框样式和颜色 */
}

/deep/.u-tabs__wrapper__nav__line {
    height: 3px;
    background: linear-gradient(90deg, rgba(65, 240, 135, 1) 0%, rgba(47, 212, 184, 1) 100%) !important;
    width: 25px !important;
    position: absolute;
    bottom: 2px;
    border-radius: 100px;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-duration: 300ms;
}
</style>
